.c-red {
  color: red;
}
.c-999 {color: #999;}
.c-333 {color: #333;}
.c-606266 {color: #606266;}

$fzList: 12,14,16,18,20,24,32;
@each $var in $fzList {
  .fz-#{$var} {font-size: #{$var}px;}
}

.fw-bold {font-weight: bold;}

.ta-c {text-align: center;}

$mgList: 0,4,5,10,15,20,30,36,40,60,80,100,200;
@each $var in $mgList {
  .mb-#{$var} {margin-bottom: #{$var}px!important;}
  .mt-#{$var} {margin-top: #{$var}px!important;}
  .ml-#{$var} {margin-left: #{$var}px!important;}
  .mr-#{$var} {margin-right: #{$var}px!important;}
  .mg-#{$var} {margin: #{$var}px!important;}
  .mtb-#{$var} {margin: #{$var}px 0!important;}
  .mlr-#{$var} {margin: 0 #{$var}px!important;}
  .pb-#{$var} {padding-bottom: #{$var}px!important;}
  .pt-#{$var} {padding-top: #{$var}px!important;}
  .pl-#{$var} {padding-left: #{$var}px!important;}
  .pr-#{$var} {padding-right: #{$var}px!important;}
  .pd-#{$var} {padding: #{$var}px!important;}
  .ptb-#{$var} {padding: #{$var}px 0!important;}
  .plr-#{$var} {padding: 0 #{$var}px!important;}
}

$wdList: 0,50,100,150,180,200,240,280,300;
@each $var in $wdList {
  .w-#{$var} {width: #{$var}px;}
  .h-#{$var} {width: #{$var}px;}
}

.d-f {display: flex;}
.d-ib {display: inline-block;}

.fl {float: left;}
.fr {float: right;}

.pe-n {pointer-events:none;}

.cs-p {cursor: pointer;}
.cs-nt {cursor: not-allowed;}